Continuous Deploy with CircleCI

Backend

Background

나는 React로 프론트엔드 작업을 할 때 주로 AWS S3에 배포한다. 새로운 커밋을 할 때마다 배포 버전을 빌드해서 파일을 새로 올리는 작업이 너무도 수동적이라고 느껴져서 서치 중, aws s3 sync 의 존재를 알게 되었다.

AWS S3 Sync

aws s3 sync build/ s3://CLIENT --delete
# delete 플래그는 기존에 있던 파일들을 지워준다

이 한줄로 빌드 버전을 S3에 바로 배포할 수 있다. 여기서 조금 더 오토메이트 하고 싶다면 package.json에 한 줄을 추가하면 된다.

{
  "name": "CLIENT",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-scripts": "2.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "yarn build && aws s3 sync build/ s3://CLIENT --delete"
  }
}

이제 터미널에서 yarn deploy를 run하면 yarn build 실행 후 빌드 버전을 S3에 올려준다. 훨씬 간편해졌다!

CircleCI

회사에서 프로젝트를 한 명이 맡아서 하는 건 사실상 흔하지 않다. 그렇다면 두 명이 커밋을 하고 머지를 한다고 가정해보자. 머지가 될 때 마다 배포를 분담한 사람은 git pull을 해서 yarn deploy를 run 해야 한다. 만약 프로젝트가 커서 여러명이 커밋을 한다면? …싫다.

원하는 레포에 CircleCI를 셋업한다

cc1

AWS Permissions을 셋팅한다

cc2

AWS Keys를 저장한 후, 프로젝트 상위 폴더에 .circleci 폴더를 만들고 그 안에 config.yml 파일을 생성한다
version: 2
jobs:
  build:
    docker:
      - image: circleci/node:7.10

    working_directory: ~/repo

    steps:
      - checkout

      - restore_cache:
          keys:
            - v1-dependencies-{{ checksum "package.json" }}
            # fallback to using the latest cache if no exact match is found
            - v1-dependencies-

      - run: yarn install

      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package.json" }}

      # run tests!
      - run: yarn test
      - run: sudo apt-get update && sudo apt-get install -y python-dev
      - run: sudo curl -O https://bootstrap.pypa.io/get-pip.py
      - run: sudo python get-pip.py
      - run: sudo pip install awscli --upgrade
      - run: aws --version
      - run: aws s3 ls
      - run: yarn run deploy

이제 CircleCI 테스트 성공 후 풀리퀘를 머지 하면 자동적으로 S3로 배포가 된다! 만세.

Reference

AWS S3 Sync

GitHubGitHubLinkedin